<template>
  <div class="container">
    <van-nav-bar
      title="团队信息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="head bg-primary"></div>
    <van-tabs v-model="active" color="#5290ff"  >
      <van-tab title="邀请店主" name="a">
        <div class="qrcode" id="qart"></div>
        <div class="save">
            <van-button type="info" @click="save" block>长按图片保存二维码</van-button>
        </div>
      </van-tab>
      <van-tab title="我的团队" name="b" :badge="`${this.total}人`">
        <van-list v-model="loading" finished-text="没有更多了" :finished="finished" @load="getMyTeam">
          <div class="list" v-for="(item,index) in myTeam" :key="index">
            <div class="item">
              <p>
                姓名：{{item.name}}
                <br />
                电话：{{item.phone}}
              </p>
            </div>
            <div>到期时间：{{item.expire_time}}</div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
// import QRCode from 'qrcode'
export default {
  name: "Team",
  data() {
    return {
      page: 0,
      active: "b",
      myTeam: [],
      error: false,
      loading: false,
      finished: false,
      last_page: 99,
      qr_code_img: "",
      total:0
    };
  },
  methods: {
    getQrCode() {
      let url = "/invite";
      let data = {
        url
      };
      this.$ajax.post({ url: "App/ownerst/qrcode", data }).then(res => {
        console.log('res',res.data.response)
        let text = `http://edsc.ed163.net${res.data.response}`;
        console.log('text',text)
        this.qr_code_img = new QRCode("qart", { text });
        // console.log('this.qr_code_img',this.qr_code_img)
      });
    },
    getMyTeam() {
      if (this.page >= this.last_page) {
        this.finished = true;
        return;
      }
      this.page++;
      let data = {
        page: this.page
      };
      this.$ajax
        .get({ url: "App/ownerst/myteam", data })
        .then(res => {
          console.log("res", res);
          this.myTeam = this.myTeam.concat(res.data.data);
          this.last_page = res.data.last_page;
          this.total=res.data.total
          this.loading = false;
        })
        .catch(res => {
          this.loading = false;
          this.finished = true;
        });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {},
    //保存二维码
    save() {
      console.log("aaa");
    }

  },
  mounted() {
    this.active = this.$route.query.active;
    this.getQrCode();
  }
};
</script>

<style lang="scss" scoped>
.container {
  /* position: relative; */
  height: 100%;
}
.head {
  height: 80px;
}
.qrcode {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 100%;
}
.save {
  width: 60%;
  position: absolute;
  top: 400px;
  left: 50%;
  transform: translateX(-50%);
}
.invite {
  width: 60%;
  position: absolute;
  top: 450px;
  left: 50%;
  transform: translateX(-50%);
}
/* 我的团队 */
.list {
  /* position: relative; */
  display: flex;
  flex-direction: column;
  // margin-bottom: 10px;
  box-shadow: 0px 1px 2px #cccccc;
  padding: 5px 0px;
  width: 94%;
  border-radius: 10px;
  margin: 10px auto;
}
</style>